<template>
  <div class="content-box">
    <e-heading>
      {{title}}
      <i class="history_total" v-if="!$route.query.curtype">共<span>{{classCount.count}}</span>课时，已上<span>{{classCount.alreadyCount}}</span>课时</i>
    </e-heading>
    <div class="history_list">
      <!--其他-->
      <el-table
        :data="historyData.list"
        stripe
        v-if="!$route.query.curtype"
        style="width: 100%">
        <el-table-column
          label="课时"
          align="center"
          :show-overflow-tooltip="true"
          width="80">
          <template slot-scope="scope">
            课时{{scope.$index + 1 + (historyData.page - 1) * 15}}
          </template>
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="课时名称"
          :show-overflow-tooltip="true"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="上课时间"
          :show-overflow-tooltip="true"
          align="center"
          width="120">
          <template slot-scope="scope">
            <p>{{scope.row.beginDate | FormatDate('yyyy-MM-dd')}} {{scope.row.weekCode | getWeekDay}}</p>
            <p>{{getParenTime(scope.row.startTime)}}-{{getParenTime(scope.row.endTime)}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          :show-overflow-tooltip="true"
          label="上课地点" width="180">
        </el-table-column>
        <el-table-column
          prop="teacher"
          align="center"
          :show-overflow-tooltip="true"
          label="授课教练" width="100">
          <template slot-scope="scope">
            {{scope.row.substituteTeacher ? `${scope.row.teacher} > ${scope.row.substituteTeacher}` : scope.row.teacher}}
          </template>
        </el-table-column>
        <el-table-column
          label="出勤情况">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">
              <p v-for="item in scope.row.attendanceRecord" :key="item" v-html="item"></p>
            </div>
            <p class="red_color" v-else>改期上课</p>
          </template>
        </el-table-column>
      </el-table>
      <!--次课-->
      <el-table
        :data="historyData.list"
        stripe
        v-else
        style="width: 100%">
        <el-table-column
          prop="name"
          label="上课时间"
          :show-overflow-tooltip="true"
          align="center"
          width="260">
          <template slot-scope="scope">
            <p>{{scope.row.beginDate | FormatDate('yyyy-MM-dd')}} {{scope.row.weekCode | getWeekDay}} {{getParenTime(scope.row.startTime)}}-{{getParenTime(scope.row.endTime)}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="schoolName"
          align="center"
          :show-overflow-tooltip="true"
          label="校区" width="200">
        </el-table-column>
        <el-table-column
          prop="teacher"
          align="center"
          :show-overflow-tooltip="true"
          label="授课教练" width="140">
          <template slot-scope="scope">
            {{scope.row.substituteTeacher ? `${scope.row.teacher} > ${scope.row.substituteTeacher}` : scope.row.teacher}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="signCount"
          :show-overflow-tooltip="true"
          label="销课学员（人）">
          <template slot-scope="scope">
            <span v-if="!scope.row.signCount">{{scope.row.signCount}}</span>
            <span v-else @click="handleGetlist(scope.row)" :class="scope.row.signCount > 0 ? 'link' : ''">{{scope.row.signCount}}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--销课记录-->
      <el-dialog
        title="销课详情"
        size="large"
        :visible.sync="dialogVisible">
        <el-row class="this_title">
          <el-col :span="12">{{$route.query.classname}}</el-col>
          <el-col :span="12">{{thisList.beginDate | FormatDate('yyyy-MM-dd')}} {{thisList.weekCode | getWeekDay}} {{getParenTime(thisList.startTime)}}-{{getParenTime(thisList.endTime)}}</el-col>
        </el-row>
        <el-scrollbar class="import_table" wrap-class="vacade-scroll">
          <el-table
            :data="clearList.list"
            stripe
            style="width: 100%">
            <el-table-column
              label="序号"
              :show-overflow-tooltip="true"
              align="center"
              width="70">
              <template slot-scope="scope">
                {{scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              :show-overflow-tooltip="true"
              label="销课学员" width="180">
            </el-table-column>
            <el-table-column
              prop="time"
              align="center"
              :show-overflow-tooltip="true"
              label="销课时间" width="120">
              <template slot-scope="scope">
                {{scope.row.time | FormatDate('yyyy-MM-dd')}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="updater"
              :show-overflow-tooltip="true"
              label="销课人">
            </el-table-column>
          </el-table>
        </el-scrollbar>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--分页-->
    <el-pagination
      v-bind="getPaginationProps(historyData)"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
  </div>
</template>
<script>
import trainApi from 'api/train'
import { parseTime } from 'utils'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  mounted () {},
  data () {
    return {
      title: '上课记录',
      dialogVisible: false,
      query: this.getQuery({
        classId: this.$route.query.classId,
        courseId: this.$route.query.curoseId
      }),
      classCount: '',
      historyData: [],
      clearList: [],
      thisList: {}
    }
  },
  methods: {
    fetch (query) {
      this.getDataList(query)
    },
    getDataList (params) {
      if (!this.$route.query.curtype) { // 非次课
        trainApi.classScheduleTimeInfo(params).then((res) => {
          this.classCount = res.data
        })
        trainApi.classScheduleInfo(params).then((res) => {
          this.historyData = res.data
        })
      } else { // 次课
        trainApi.getClassStudentInfoCK(params).then((res) => {
          this.historyData = res.data
        })
      }
    },
    getParenTime (time) {
      return parseTime(time, '{h}:{i}')
    },
    handleGetlist (row) {
      this.dialogVisible = true
      trainApi.getCKStudentInfo({
        classId: this.$route.query.classId,
        courseId: this.$route.query.curoseId,
        classScheduleId: row.id,
        page: 1,
        rows: 5000
      }).then((res) => {
        this.thisList = row
        this.clearList = res.data
      })
    }
  }
}
</script>
<style lang="scss">
.vacade-scroll{
  max-height: 510px;
  overflow-y: scroll;
}
.history_total{
  font-style:normal;
  font-size:14px;
  font-weight:normal;
  span{
    color:#f30;
  }
}
.history_list{
  border-top:1px solid #efefef;
  padding-top: 20px;
  .el-table td{
    height:48px;
  }
  .this_title{
    font-weight:bold;
    margin-bottom:15px;
  }
  .cell{
    font-size:12px;
    padding:5px 10px;
  }
  .red_color{
    color:#f30;
  }
}
</style>
